<template>
	<view>
		<view class="top">
			<scroll-view scroll-x="true" scroll-with-animation="true">
				<view v-for="(item,index) of nav" @click="tabClick(item)">
					<view class="head-tab">
						<view class="tab" :class="idx===index ? 'active tab' : ''" @click="tabTypeFunc(item.id)">
							{{item.name}}
						</view>
						<view class="image-item" v-show="idx==index">
							<image class="tab tab-iamge" src="../../../static/tab-iamge.png"></image>
						</view>
					</view>
				</view>
				<view class="line"></view>
			</scroll-view>
		</view>
		<!-- <view class="vip-card expired" v-for="n in 3" v-if="idx == 2">
			<view class="vip-image expired">
				<image src="../../../static/record-bg.png"></image>
			</view>
			<view>
				<view class="vip-content expired">
					<text>健康理疗养生会馆服务卡</text>
					<text>3次免费理疗体验</text>
					<text>900积分</text>
				</view>
				<view class="vip-use expired2">
					已过期
				</view>
				
			</view>
		</view>
		<view class="vip-card" v-for="n in 3" v-if="idx == 0 || idx == 1">
			<view class="vip-image">
				<image src="../../../static/record-bg.png"></image>
			</view>
			<view>
				<view class="vip-content">
					<text>健康理疗养生会馆服务卡</text>
					<text>3次免费理疗体验</text>
					<text>900积分</text>
				</view>
				<view class="vip-use" v-if="idx == 0">
					去使用
				</view>
				<view class="vip-use used" v-if="idx == 1">
					已使用
				</view>
			</view>
		</view> -->
		<view class="vip-card expired" v-for="(item,index) in listData" :key="index" v-if="idx == 2">
			<view class="vip-image expired">
				<image :src="item.shop_iamge"></image>
			</view>
			<view>
				<view class="vip-content expired">
					<text>{{item.shop_name}}</text>
					<text>{{item.shop_explain}}</text>
					<text>{{item.shop_integral }}积分</text>
				</view>
				<view class="vip-use expired2">
					已过期
				</view>
				
			</view>
		</view>
		<view class="vip-card" v-for="(item,index) in listData" :key="index" v-if="idx == 0 || idx == 1">
			<view class="vip-image">
				<image src="../../../static/record-bg.png"></image>
			</view>
			<view>
				<view class="vip-content expired">
					<text>{{item.shop_name}}</text>
					<text>{{item.shop_explain}}</text>
					<text>{{item.shop_integral }}积分</text>
				</view>
				<view class="vip-use" v-if="idx == 0">
					去使用
				</view>
				<view class="vip-use used" v-if="idx == 1">
					已使用
				</view>
			</view>
		</view>
		<!-- <view class="developing" v-if="developing">
			正在开发当中，请尽情期待... ...
		</view> -->
			<!-- 没有记录 -->
			<view class=" d-c-c p30" v-if="listData.length == 0 && !loadding">				
				<text class="cont">亲，暂无相关记录哦</text>
			</view>
			<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
		
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				loadding:false,
				listData:[],
				nav: [{
						name: '未使用',
						id: 0
					},
					{
						name: '已使用',
						id: 1
					},
					{
						name: '已过期',
						id: 2
					},
				],
				idx: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*当前选中的类别*/
				type_active: 0,
				developing:true,
			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loadding) {
					return 1;
				} else {
					if (this.listData.length != 0 ) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		onShow() {
			this.init();
		},
		onLoad() {
			this.getDatainfo();
		},
		methods: {
			/*tab切换*/
			tabTypeFunc(e) {
				if(e!=this.idx){
					this.idx=e,		
					this.listData=[],
					this.getDatainfo();
				}
			},
			/*获取兑换数据*/
			getDatainfo() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('user.shop/record', 
				{
					type:self.idx+1,
				},
				 function(res) {
					self.listData = res.data.record;
					console.log(res);
					self.loadding = false;
					uni.hideLoading();
				});
			},
			
			init() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select('.top');
						// view.boundingClientRect(data => {
						// 	let h = _this.phoneHeight - data.height;
						// 	_this.scrollviewHigh = h;
						// }).exec();
					}
				});
			},
			/* 切换导航条 */
			tabClick(item) {
				this.idx = item.id;
			},
		}
	}
</script>

<style lang="scss">
	.nullmsg{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-color: #ffffff;
		margin-top: 0;
		
	}
	.cont{
		position: absolute;
		top: 120rpx;
		margin-left: -30rpx;
	}
	.head-tab {
		float: left;
		color: #7e7a75;
		font-size: 30rpx;
	}

	.tab {
		width: 100rpx;
		margin: 20rpx 40rpx 10rpx;
		text-align: center;
	}

	.tab-iamge {
		display: flex;
		flex-direction: row;
		height: 16rpx;
		margin: 0rpx 40rpx;
	}

	.line {
		clear: both;
		display: block;
		width: 100%;
		height: 10rpx;
		background-color: #e7e7e7;
	}

	.active {
		color: #5864FD;
	}

	.vip-card {
		padding: 40rpx 20rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		border-bottom: 4rpx solid #e7e7e7;
	}

	.vip-image {
		width: 36%;
		height: 180rpx;
		border-radius: 20rpx;
		margin-right: 30rpx;
	}

	.vip-image image {
		border-radius: 16rpx;
	}

	.vip-content {
		margin-top: 6rpx;
		display: flex;
		flex-direction: column;
	}

	.vip-content text:nth-child(2) {
		margin-top: 10rpx;
		color: #7e7a75;
		margin-bottom: 60rpx;
	}

	.vip-content text:nth-child(3) {
		color: #f9ac10;
	}

	.vip-use {
		width: 160rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border: 2rpx solid #007AFF;
		border-radius: 100rpx;
		color: #007AFF;
		position: absolute;
		bottom: 40rpx;
		right: 20rpx;
	}
	.used{
		border: 2rpx solid #9a9a9a;
		color: #9a9a9a;
	}
	.expired{
		color: #9a9a9a;
		z-index: 99;
	}
	.expired text:nth-child(3) {
		color: #9a9a9a;
	}
	.expired2{
		border: 2rpx solid #9a9a9a;
		color: #9a9a9a;
	}
	.developing{
		width: 100%;
		height: 100%;
		line-height: 600rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 0rpx;
		left: 0;
		text-align: center;
		font-size: 30rpx;
		z-index: 999;
	}
</style>
